<template>
  <div class="user">
    <crumbs :bread="bread" :content-top="false">
      <template #content>
        <div class="u-top">
          <div>
            <div class="name-level">
              <span class="name">{{ currentUser.nickName }}</span>
            </div>
            <div class="u-number">员工编号: {{ currentUser.userNo }}</div>
            <div class="u-mobile">手机号: {{ currentUser.phonenumber }}</div>
          </div>
          <div class="right-top">
            <edit-mobile type="button" class="edit-mobile-btn"></edit-mobile>
            <safe></safe>
          </div>
        </div>
        <div class="u-info">
          <div class="row">
            <div class="item">
              <span class="label">姓名</span>
              <span class="value">{{ currentUser.nickName }}</span>
            </div>
            <div class="item">
              <span class="label">员工编号</span>
              <span class="value">{{ currentUser.userNo }}</span>
            </div>
          </div>
          <div class="row">
            <div class="item">
              <span class="label">所属部门</span>
              <span class="value">{{ currentUser.dept && currentUser.dept.deptName }}</span>
            </div>
            <div class="item">
              <span class="label">入职时间</span>
              <span class="value">{{ currentUser.entryDate }}</span>
            </div>
          </div>
          <div class="row">
            <div class="item">
              <span class="label">邮箱</span>
              <span class="value">{{ currentUser.email }}</span>
            </div>
            <div class="item">
              <span class="label">手机号</span>
              <span class="value"> {{ currentUser.phonenumber }} </span>
            </div>
            <!--<div class="item">
              <span class="label">角色</span>
              <span class="value">{{ Array.from(currentUser.roles, (item) => item.roleName).join(",") }}</span>
            </div>-->
          </div>
        </div>
      </template>
    </crumbs>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import { Input, Button } from "ant-design-vue";
import Crumbs from "@/components/Crumbs/index.vue";
import CModal from "@/components/CModal/index.vue";
import Safe from "./components/Safe/index.vue";
import EditMobile from "./components/EditMobile/index.vue";

@Component({
  name: "User",
  components: {
    Crumbs,
    CModal,
    Safe,
    EditMobile,
    AInput: Input,
    AButton: Button
  }
})
export default class User extends Base {
  private created() {
    this._created();
  }

  private save() {
    // this.editMobileVisible = false;
  }

  // private checkParmas() {}

  // // 初始化修改手机弹框
  // private initEditMobileModal() {
  //   this.code = "";
  //   this.uuid = "";
  //   this.phonenumber = "";
  //   this.sendStatus = SendCodeStatus.undo;
  // }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.user {
  color: #171725;
  font-size: 15px;
  /deep/.crumbs-content {
    padding: 0;
  }

  .right-top {
    position: absolute;
    display: flex;
    top: 12px;
    right: 22px;
  }

  .edit-mobile-btn {
    margin-right: 12px;
  }

  .u-top {
    height: 150px;
    background: url("~@/assets/images/bg-1.png") 30px center no-repeat;
    background-size: auto 80%;
    display: flex;
    align-items: center;
    padding-left: 210px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;

    .name-level {
      display: flex;
      align-items: center;
    }

    .name {
      font-size: 16px;
      font-weight: bold;
      margin-right: 6px;
    }

    .u-number,
    .u-mobile {
      margin-top: 8px;
    }
  }

  .u-info {
    padding-left: 60px;
    padding-bottom: 30px;
    margin-top: 20px;
  }

  .row {
    display: flex;
    & > div {
      .scale(width, 480px);
      padding: 13px 0;
      display: flex;
      align-items: center;
    }
    .label {
      .scale(width, 110px);
      color: rgba(0, 0, 0, 0.5);
    }
    .value {
      padding: 2px 6px;
      border-radius: 2px;
      display: flex;
      align-items: center;
    }
  }
  // .mobile {
  //   cursor: pointer;
  //   &:hover {
  //     background-color: #f8fafd;
  //     &::after {
  //       font-family: "iconfont";
  //       content: "\e660";
  //       color: #64acfb;
  //       margin-left: 6px;
  //     }
  //   }
  // }
}
</style>
